<template>
  <a-modal
    :visible="visible"
    :afterClose="hanldeAfterClose"
    @cancel="handleCancel"
    @ok="handleOk"
    :confirmLoading="isSubmiting"
    title="特殊楼层"
  >
    <a-spin :spinning="spinning">
      <a-form :form="form" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
        <a-form-item label="楼层">
          <a-input-number
            v-decorator="['LC', { rules: [{ required: true, message: '请输入楼层号' }] }]"
            placeholder="请输入楼层号"
          ></a-input-number>
        </a-form-item>
        <a-form-item label="套数">
          <a-input-number
            v-decorator="['TS', { rules: [{ required: true, message: '请输入套数' }] }]"
            placeholder="请输入套数"
          ></a-input-number>
        </a-form-item>
        <!-- <a-form-item label="备注">
          <a-textarea v-decorator="['remark']" placeholder="备注" :auto-size="{ minRows: 2, maxRows: 4 }"></a-textarea>
        </a-form-item> -->
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    defaultData: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    visible (n, o) {
      if (n && !this.$isEmpty(this.defaultData)) {
        this.form.setFieldsValue(this.defaultData)
      }
    }
  },
  data () {
    return {
      form: this.$form.createForm(this, { name: 'specialFloor' }),
      isSubmiting: false,
      spinning: false
    }
  },
  methods: {
    close () {
      this.form.resetFields()
      this.$emit('update:visible', false)
    },
    handleCancel () {
      this.close()
      this.hanldeAfterClose()
    },
    handleOk () {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$emit('change', {
            type: this.$isEmpty(this.defaultData) ? 'add' : 'edit',
            value: values
          })
          this.close()
        }
      })
    },
    hanldeAfterClose () {}
  }
}
</script>
    <style lang="less" scoped>
/deep/ .ant-form-item-label {
  white-space: normal;
  padding-right: 12px;
}
/deep/ .ant-calendar-picker,
.ant-input-number {
  width: 100%;
}
</style>
